<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/tag_lib.jsp"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>스프링 테스트 예제</title>
		<script type="text/javascript">
		    // Google Maps
			function initialize() {      
	            if (GBrowserIsCompatible()) {        
	                var map = new GMap2(document.getElementById("map_canvas"));
	                var point = new GLatLng(37.4993106, 127.0352316);        
	                map.setCenter(point, 17);        
	                map.setUIToDefault();
	
	                var marker = createMarker(point,'유젠<br /><a href="http://www.uzen.net">http://www.uzen.net</a>'); 
	                map.addOverlay(marker);
	                // marker.openInfoWindowHtml("<font color='red'>UZEN!</font>");
	                map.setUIToDefault();
	                map.enableGoogleBar();
	                

	                GEvent.addListener(map, "click", function(overlay,latlng) {
	                    if (latlng) {
	                      var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(latlng) + " at zoom level " + map.getZoom();
	                      myHtml = myHtml + "<br /><a href=\"javascript:setMapValue('" + latlng + "');\">보내기</a>" + latlng;
	                      map.openInfoWindow(latlng, myHtml);
	                    }
	                  });

	                  
	            } else {
	                alert("Sorry, the Google Maps API is not compatible with this browser");
	            }
	        }    
	
	        function createMarker(point, html) {
	            var marker = new GMarker(point);
	            GEvent.addListener(marker, "click", 
	                    function() {
	                        marker.openInfoWindowHtml(html);
	                    }
	            );
	            return marker;
	        }
	
	        function search() {
	            var address = document.getElementById("address").value; 
	            var map = new GMap2(document.getElementById("map_canvas"));
	            var geocoder = new GClientGeocoder();
	            geocoder.getLatLng(address, 
	                    function (point){
	                        if (!point) {
	                            alert(address + " not found");
	                        } else { 
	                            map.setCenter(point, 18);
	                            map.setUIToDefault();
	                            
	                            var marker = new GMarker(point);
	                            map.addOverlay(marker);
	                            marker.openInfoWindowHtml(address)
	                        }
	                    }
	            );
	        }

	        function setMapValue(latlng) {
	            $("#attachedLocation").val(latlng);
	        }
	        
	        
	        // jQuery 
	        $(document).ready(function () {
	        	initialize();
	        	
			    $("#addFile").click(function () {
			      $("#attached").append("<input type='file' name='' id='' />");
			    });

			    $("#addMap").click(function () {
				    alert("addMap");
				    // $("#attached").append();
			    });
			});

		</script>
	</head>
	<body onunload="GUnload()">
	    Article Form<br/>
        <hr />
        <form:form commandName="article" action="./${article.mode}.jude" enctype="multipart/form-data">
            <form:hidden path="boardNo"/>
            <form:hidden path="articleNo"/>
            <form:hidden path="parentArticleNo"/>
            Title : <form:input path="title"/><br />
            Content : <form:textarea path="content"/><br />
            Notice Flag : <form:select path="noticeFlag">
                <form:option value="N">N</form:option>
                <form:option value="Y">Y</form:option>
            </form:select><br />
            Answer Flag : <form:select path="answerFlag">
                <form:option value="N">N</form:option>
                <form:option value="Y">Y</form:option>
            </form:select><br />
            Due Date : <form:input path="dueDate"/><br />
            Start Date : <form:input path="startDate"/><br />
            End Date : <form:input path="endDate"/><br />
            ---------------------------------<br />
            <div id="attached">
                <div id="attchedUrl"></div>
                <div id="attachedFile">
                    <input type="file" name="attachedFile">
                </div>
                <div id="attchedMap">
                    <form:input path="attachedLocation"/>
                </div>
            </div>
            ---------------------------------<br />
            <input type="submit" /><br />
        </form:form>
        <button id="addFile">파일 추가</button>
        <button id="addMap">지도 추가(1개만 가능)</button>
        <script type="text/javascript">
            CKEDITOR.replace( 'content' );
        </script>
        <hr />
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
        <div id="mapResult">
        </div>
        <input type="text" id="address" />
        <button onclick="search()">검색</button>
        <hr />
        <a href="./list.jude?boardNo=${article.boardNo}">List board</a><br />
	</body>
</html>